<template>
  <!--    活动入口  输入邀请码-->
  <div class="invite-main" v-if="isShow && !isResulteShow" >
    <div class="invite-enter">
      <div class="invite-close" @touchend="closeInviteTouch()"></div>

      <div class="invite-code-box" v-if="!seedActivity.hasUsedInviteCode">
        <input class="invite-code" type="number" v-model="code" pattern="number"
          oninput="if(value.length>4)value=value.slice(0,4)" placeholder="请输入邀请码" />
      </div>
      <div class="exchange" @touchend="exchangeTouch()" v-if="!seedActivity.hasUsedInviteCode"></div>

      <div class="hasExchanged" v-if="seedActivity.hasUsedInviteCode" @touchend="entryTouch()"></div>
    </div>
    <LoadPicbook ref="loadPicbook" />
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex"
import LoadPicbook from "../picbookList/loadPicbook.vue"
export default {
  data() {
    return {
      code: '',
      isShow: false
    }
  },
  components: {
    LoadPicbook
  },
  computed: {
    ...mapGetters("seedActivityStatus", {
      seedActivity: "getSeedActivity",
      seedPicbook: "getSeedPicbook",
      isResulteShow: "getIsResulteShow"
    }),
    ...mapGetters("picbookListStatus", {
      picbookList: "getPicbookList"
    }),
  },
  created() {
    this.deleteSeedPicbook()
  },
  methods: {
    //关闭邀请活动框
    closeInviteTouch: function () {
      this.isShow = false
    },
    //点击兑换邀请码
    exchangeTouch: async function () {
      this.setIsSeedEntery(true)
      //第一次进入——输入邀请码
      const json = {
        "deviceUuid": this.deviceUuid,
        "code": this.code
      }
      const [data, err] = await this.awaitWarp(this.$post(this.api.seedActivity, json))
      if (err) console.log(err)
      if (!this.seedActivity.hasUsedInviteCode && data.isValidCode) {
        if (!data.isUsedByAnother) {
          this.$set(this.seedActivity, 'hasUsedInviteCode', true)
          //随机推荐一本绘本
          const picbookId = parseInt(Math.random() * this.seedActivity.picbookIds.length)
          this.picbookTouch(this.seedActivity.picbookIds[picbookId])
          this.setSeedPicbook(this.seedActivity.picbookIds[picbookId])
        } else {
          this.setPopup({
            content: "该邀请码已被他人使用过了！"
          })
        }
      } else {
        this.setPopup({
          content: "邀请码错误！"
        })
      }
    },

    //已经输入过邀请码
    entryTouch: function () {
      this.setIsSeedEntery(true)
      //随机推荐一本绘本
      const picbookId = parseInt(Math.random() * this.seedActivity.picbookIds.length)
      this.picbookTouch(this.seedActivity.picbookIds[picbookId])
      this.setSeedPicbook(this.seedActivity.picbookIds[picbookId])
    },
    //点击绘本
    picbookTouch: function (item) {
      this.touchMusic()
      this.$refs.loadPicbook.loadPicbook({
        picbookId: item,
        beforeRouter: this.$route.query.beforeRouter
      })
    },
    ...mapActions("mainStatus", ['setPopup']),
    ...mapActions("seedActivityStatus", ["setSeedActivity", "setSeedPicbook", "deleteSeedPicbook", "setIsSeedEntery"])
  }
}
</script>

<style scoped lang="stylus">
.invite-main
  $coord('WHLT', 100%, 100%, 0, 0)
  background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png') 0 0 / 100% 100%
  z-index 99
  .invite-enter
    position absolute
    $center('WHLT', 30em, 20rem)
    background url($urlTitle + 'invite/活动内容主体-修正.png') center center / contain no-repeat
    .invite-close
      $coord('WHRT', 2rem, 2rem, 0, 0)
      background url($urlTitle + 'invite/关闭.png') center center / contain no-repeat
    .invite-code-box
      $coord('WHRT', 9.5rem, 1.8rem, 6.5rem, 10rem)
      background url($urlTitle + 'invite/邀请码输入框.png') 0 0 / 100% 100%
      .invite-code
        $coord('WHLT', 100%, 100%, 0, 0)
        outline none
        font-size 1rem
        border-radius 0.5rem
        border none
        box-sizing border-box
        color rgb(251, 149, 55)
        padding-left 1rem
      input::-webkit-input-placeholder
        color #CCCCCC
    .exchange
      $coord('WHRT', 3rem, 1.8rem, 2.5rem, 10rem)
      background url($urlTitle + 'invite/兑换.png') 0 0 / 100% 100%
    .hasExchanged
      $coord('WHRT', 6rem, 2rem, 7rem, 10rem)
      background url($urlTitle + 'invite/进入绘本按钮.png') 0 0 / 100% 100%
</style>
